<template>
	<view v-if="showData">
		<uni-search-bar :placeholder="$t('baseCommon.message.enterAccountOrName')" @confirm="searchData" @cancel="init" />

		<view class="list-data">
			<label class="select-list" v-for="item in list" :key="item.userId" @click="checkItem(item)">
				<view class="check-cell">
					<checkbox :value="item.userId" :checked="item.checked" class="check-size" />
				</view>
				<view class="select-content">
					<view class="select-detail">{{ item.account }}: {{ item.userName }}</view>
				</view>
			</label>
		</view>

		<view class="select-btn">
			<button type="primary" @click="doSure">{{$t('baseCommon.buttons.confirm')}}</button>
		</view>
	</view>
</template>

<script>
	import { queryUserByGroup, query4Org, queryDataByKey } from '@/api/platform/common.js'
	import { getRolePerson } from '@/api/business/ticket.js'

	export default {
		data() {
			return {
				showData: false,
				type: '',
				groupId: '',
				checkedList: [], //已选择的id
				list: [], //筛选出来的部分
				allList: [], //全部
				users: []
			}
		},
		async onLoad(params) {
			this.type = params.type
			this.groupId = params.groupId ? params.groupId : ""
			this.users = params.users ? params.users.split(",") : []
			await this.init()
		},
		methods: {
			async init() {
				this.showData = false
				this.list = []
				
				if(this.type == "delegate"){
					await query4Org().then(res => {
						this.list = res.data.dataResult
					})
				} else if(this.type == "notice" || this.type.indexOf("member") !== -1) {
					await queryUserByGroup().then(res => {
						this.list = res.data.dataResult
					})
				} else if(this.type == "delay" || this.type == "hang" || this.type == "transfer") {
					let params = [
						{ key: "Q^MAIN_PID_^SL", value: this.groupId }, 
						{ key: "key", value: "czfzrxz" }
					]
					await queryDataByKey(params).then(res => {
						this.list = res.data.dataResult
					})
				} else if(this.type == "operatorDH") {
					await getRolePerson({ isHwe: '1' }).then(res => {
						this.list = res.data
					})
				}
				
				this.handleData()
				this.showData = true
			},
			handleData() {
				this.list.forEach(item => {
					item.userId = item.userId ? item.userId : item.id
					item.userName = item.userName ? item.userName : item.name
					item.account = item.account ? item.account : item.userNum
					item.type = 'employee'
					item.groupType = ''
					
					if(this.users.indexOf(item.userId) >= 0) {
						item.checked = true
					} else {
						item.checked = false
					}
				})
				this.checkedList = this.users
				this.allList = this.list
			},
			searchData(e) {
				if (e.value) {
					this.list = []
					for (let i = 0; i < this.allList.length; i++) {
						if (this.allList[i].userName.indexOf(e.value) >= 0 || this.allList[i].account.indexOf(e.value) >= 0) {
							this.list.push(this.allList[i])
						}
					}
				} else {
					this.init()
				}
			},
			checkItem(item) {
				item.checked = !item.checked
				if(item.checked) {
					if (!this.checkedList.includes(item.userId)) {
						this.checkedList.push(item.userId)
					}
				} else {
					this.checkedList.splice(this.checkedList.indexOf(item.userId), 1)
				}
			},
			doSure() {
				let people = []
				this.checkedList.forEach(itemC => {
					this.allList.forEach(itemA => {
						if (itemC == itemA.userId) {
							people.push(itemA);
						}
					})
				})
				
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectUserMulti', people);
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/style/common-list.scss';
	
	page {
		overflow: visible;
	}
	
	.uni-searchbar {
		border-bottom: 1px solid #eee;
	}
	
	.list-data {
		padding-bottom: 56px;
	}
	
	.select-list {
		padding: 12px;
	}
</style>
